<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <script>
      // 扩展运算符：...
      let arr = [2, 3, 4, 5]
      //   console.log(arr)
      //   console.log(...arr) // 2 3 4 5
      // 用途1：求最大最小值
      console.log(Math.max(3, 4, 2, 5, 6))
      let arr1 = [3, 4, 5, 6, 7, 8, 9]
      console.log(Math.max(...arr1))

      // 用途2：合并、复制数组
      //   const a1 = [2, 3]
      //   const a2 = a1
      //   a2[0] = 999
      //   console.log(a1) // [999,3]
      const a3 = [5, 6, 7]
      const a4 = [...a3]
      console.log(a4)
      a4[0] = 888
      console.log(a3)

      const a5 = [5, 6, 7]
      const a6 = [8, 9, 10]
      const newArr = a5.concat(a6)
      console.log(newArr)

      const a7 = [...a5, ...a6]
      console.log(a7)

      // 用途3 ：展开字符串
      const str = 'hello world'
      console.log(...str)
      //   字符串的反转
      console.log(str.split('').reverse().join(''))
      console.log([...str].reverse().join(''))
      //   const str1 = 'h?e?l?l?89dw?d'
      //   console.log(str1.split('?'))

      //   用途4:伪数组转换为真数组
      const divs = document.querySelectorAll('div')
      console.log(divs)
      const divs1 = [...divs]
      console.log(divs1)
      divs1.push(666)
      const divs2 = Array.from(divs)
      console.log(divs2)

      //   伪数组转换成真数组：
      //   1:...
      //   2:Array.from
    </script>
    <script>
      var a = 1
      var o = {
        a: 2,
        b: {
          a: 3,
          fn2: () => {
            console.log(this.a)
          },
          fn3: function () {
            return () => {
              console.log(this.a)
            }
          },
        },
      }
      o.b.fn2()
      o.b.fn3()()
    </script>
  </body>
</html>
